<script setup>
import { ref, onMounted } from 'vue'
import { listPositions, createPosition, updatePosition, deletePosition } from '../../api/admin'
import { ElMessage, ElMessageBox } from 'element-plus'

const list = ref([])
const total = ref(0)
const query = ref({ name: '', page: 1, size: 10 })
const loading = ref(false)
const dialogVisible = ref(false)
const form = ref({ positionId: null, positionName: '' })

const fetchList = async () => {
  loading.value = true
  try {
    const data = await listPositions({ name: query.value.name || undefined, page: query.value.page, size: query.value.size })
    list.value = data.list || []
    total.value = data.total || 0
  } finally { loading.value = false }
}

const openCreate = () => { form.value = { positionId: null, positionName: '' }; dialogVisible.value = true }
const openEdit = (row) => { form.value = { positionId: row.positionId, positionName: row.positionName }; dialogVisible.value = true }

const submit = async () => {
  loading.value = true
  try {
    if (form.value.positionId) {
      await updatePosition(form.value.positionId, { positionName: form.value.positionName })
    } else {
      await createPosition({ positionName: form.value.positionName })
    }
    ElMessage.success('保存成功')
    dialogVisible.value = false
    fetchList()
  } finally { loading.value = false }
}

const remove = async (row) => {
  await ElMessageBox.confirm('确认删除该职称？', '提示')
  await deletePosition(row.positionId)
  ElMessage.success('删除成功')
  fetchList()
}

onMounted(fetchList)
</script>

<template>
  <el-card>
    <div class="header">
      <h3>职称管理</h3>
      <el-button type="primary" @click="openCreate">新增职称</el-button>
    </div>
    <el-form :inline="true" :model="query" class="mb-2">
      <el-form-item label="名称"><el-input v-model="query.name" /></el-form-item>
      <el-form-item><el-button type="primary" @click="query.page=1;fetchList()">查询</el-button></el-form-item>
    </el-form>
    <el-table :data="list" v-loading="loading" style="width:100%">
      <el-table-column prop="positionId" label="ID" width="80" />
      <el-table-column prop="positionName" label="名称" />
      <el-table-column label="操作" width="180">
        <template #default="{ row }">
          <el-button size="small" @click="openEdit(row)">编辑</el-button>
          <el-button size="small" type="danger" @click="remove(row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination class="mt-2" background layout="total, prev, pager, next" :total="total" :page-size="query.size" :current-page="query.page" @current-change="(p)=>{query.page=p;fetchList()}" />
  </el-card>

  <el-dialog v-model="dialogVisible" title="职称信息" width="420px">
    <el-form :model="form" label-width="100px">
      <el-form-item label="名称"><el-input v-model="form.positionName" /></el-form-item>
    </el-form>
    <template #footer>
      <el-button @click="dialogVisible=false">取消</el-button>
      <el-button type="primary" :loading="loading" @click="submit">提交</el-button>
    </template>
  </el-dialog>
</template>

<style scoped>
.header{ display:flex; justify-content:space-between; align-items:center; }
.mb-2{ margin-bottom:12px; }
.mt-2{ margin-top:12px; }
</style>